<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:ry="">
    <head>
        <th:block th:include="include :: header('自定义单选按钮')" />
    </head>
    <body class="gray-bg">
    <form>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>自定义单选按钮&nbsp;&nbsp;</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="font-noraml">普通单选：</label>
                                <ry:radio name="radio_test1" class="radio-box" itemLabel="选项1" itemValue="0" value="1"/>
                                <ry:radio name="radio_test1" class="radio-box" itemLabel="选项2" itemValue="1" value="1"/>
                                <ry:radio name="radio_test1" class="radio-box" itemLabel="选项3" itemValue="2" value="1"/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">字典加载：</label>
                                <ry:radioDict dictType="sys_job_status" name="tradio_test2" class="radio-box" required="true" />
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">List加载：</label>
                                <ry:radioList name="radio_test3" class="radio-box" th:list="${posts}" itemLabel="post_name" itemValue="post_id" value="3"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>自定义复选框&nbsp;&nbsp;</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="font-noraml">普通复选：</label>
                                <ry:checkbox name="checkbox_test1" class="check-box" itemLabel="选项1" itemValue="0" value="1,2"/>
                                <ry:checkbox name="checkbox_test1" class="check-box" itemLabel="选项2" itemValue="1" value="1,2"/>
                                <ry:checkbox name="checkbox_test1" class="check-box" itemLabel="选项3" itemValue="2" value="1,2"/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">字典加载：</label>
                                <ry:checkboxDict dictType="sys_job_status" name="checkbox_test2" class="check-box" required="true" value="0,1"/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">List加载：</label>
                                <ry:checkboxList name="checkbox_test3" class="check-box" th:list="${posts}" itemLabel="post_name" itemValue="post_id" value="1,3"/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">自定义分隔符：</label>
                                <ry:checkboxList name="checkbox_test3" class="check-box" th:list="${posts}" itemLabel="post_name" itemValue="post_id" delims=";" value="1;3"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>自定义切换按钮&nbsp;&nbsp;<small>switchValue为本身控件值</small></h5>
                            <div class="ibox-tools">
                                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="font-noraml">切换按钮：</label>
                                <ry:switch id="switch_test" switchValue="0" value="0"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <th:block th:include="include :: footer" />
    <script>
        $(function() {
            $(".modal").appendTo("body"), $("[data-toggle=popover]").popover(), $(".collapse-link").click(function() {
                var div_ibox = $(this).closest("div.ibox"),
                    e = $(this).find("i"),
                    i = div_ibox.find("div.ibox-content");
                i.slideToggle(200),
                    e.toggleClass("fa-chevron-up").toggleClass("fa-chevron-down"),
                    div_ibox.toggleClass("").toggleClass("border-bottom"),
                    setTimeout(function() {
                        div_ibox.resize();
                    }, 50);
            }), $(".close-link").click(function () {
                var div_ibox = $(this).closest("div.ibox");
                div_ibox.remove()
            });
        });
    </script>
    </body>
</html>
